<template>
	<view style="width: 100%;height: 100%;display: flex;overflow: hidden;background-color: #f7f7f7;">
		<view style="flex-basis: 80px;height: 100%;overflow: hidden;background-color: #fff;">
			<scroll-view :scroll-top="leftScrollTop" style="height: 100%;width: 100%;" show-scrollbar="true"
				scroll-y="true" @scroll="leftScroll">
				<view
					@click="leftMenuItemClick(index)"
					style="color: #8f8f8f;width: 100%;height: 80px;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					v-for="(item,index) in menu" :key="item.classificationId" 
					:class="leftMenuActiveItem == index?'leftMenuActiveItem':''">
					<image :src="item.imgUrl ? adminImgBaseUrl+item.imgUrl:defaultImg" style="width: 32px;height: 32px;"></image>
					<view>{{item.label}}</view>
				</view>
			</scroll-view>
		</view>
		<view style="flex: 1;height: 100%;overflow: hidden;">
			<scroll-view :scroll-top="rightScrollTop" 
				style="height: 100%;width: 100%;padding: 0 10px;box-sizing: border-box;" 
				show-scrollbar="true"
				scroll-with-animation="true"
				scroll-y="true" @scroll="rightScroll">
				<view
					style="width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					v-for="item in menu" :key="item.label">
					<view style="width: 100%;height: 35px;line-height: 35px;font-size: 15px;">{{item.label}}</view>
					<view 	
						style="width: 100%;display: flex;height: 120px;
						background-color: #FFFFFF;border-radius: 10px;
						padding: 10px;margin-bottom: 10px;box-sizing: border-box;"
						v-for="citem in item.children" :key="citem"
						@click="commodityCardClick(citem)">
						<view style="flex-basis: 160rpx;overflow: hidden;display: flex;align-items: center;"> 
							<image :src="citem.image ? adminImgBaseUrl+citem.image:defaultImg" style="width: 160rpx;height: 160rpx;"></image>
						</view>
						<view 
							style="flex: 2;overflow: hidden;display: flex;padding-left: 10px;box-sizing: border-box;
							flex-direction: column;position: relative;">
							<view style="font-weight: 600;">{{citem.storeName}}</view>
							<view style="color: #9e9e9e;font-size: 14px;" class="text-box">{{citem.introduction}}</view>
							<view style="flex: 1;display: flex;justify-content: space-between;align-items: flex-end;">
								<view style="flex: 1;font-weight: bold;font-size: 14px;"><text style="font-size: 12px;">￥</text>{{citem.price}}</view>
								<view >
									<u-button type="primary" text="选规格" size="mini" shape="circle"></u-button>
								</view>
							</view>			
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {adminImgBaseUrl,defaultImg} from '@/utils/env.js'
	let titleHeight = 35;
	let cardHeight = 130;
	let menuHegiht = 80;
	export default {
		props:{
			"menu":{
				type:Array
			},
		},
		computed:{
			rightHeightList() {
				let data = [0]
				for(let z=0;z<this.menu.length;z++){
					data.push(titleHeight+cardHeight*this.menu[z].children.length+data[data.length-1])
				}
				return data;
			}
		},
		data() {
			return {
				leftScrollTop: 0,
				rightScrollTop: 0,
				leftMenuActiveItem:0,
				adminImgBaseUrl:adminImgBaseUrl,
				defaultImg:defaultImg,
			}
		},
		methods: {
			leftScroll(e) {
				// console.log("left:"+e.detail.scrollTop)
				// let num = Math.floor(e.detail.scrollTop/menuHegiht);
				// this.rightScrollTop = this.rightHeightList[num];
			},
			rightScroll(e) {
				// console.log("right:"+e.detail.scrollTop)
				let h = Math.ceil(e.detail.scrollTop);
				// console.log(h)
				for(let i=1;i<this.rightHeightList.length;i++) {
					if( h >= this.rightHeightList[i-1] && h < this.rightHeightList[i]){
						this.leftMenuActiveItem = i-1;
						// console.log(this.leftMenuActiveItem)
						this.leftScrollTop = (i-1)*menuHegiht - 160;
						break;
					}
				}
			},
			leftMenuItemClick(index) {
				// this.leftMenuActiveItem = index;
				this.rightScrollTop = this.rightHeightList[index];
			},
			commodityCardClick(data){
				this.$emit("commodityCardClick",data)
			}
		}
	}
</script>

<style scoped>
	.leftMenuActiveItem{
		background-color: #f9f9f9;
		border-left: 5px solid #179997;
		box-sizing: border-box;
		color: #000000 !important;
	}
	.text-box{
		word-wrap:break-word;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 作为弹性伸缩盒子模型显示 */
		display: -webkit-box;
		/* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
		-webkit-box-orient: vertical;
		/* 显示的行 */
		-webkit-line-clamp: 2;
	}
</style>
